Ecriture code HTMLS-CSS d'après maquettes

Projet réalisé pour un devoir dans le cadre de ma formation de webdesigner. Ecriture du code en HTML/CSS d'après les maquette de différentes pages du site ci-joint.

Image may contain: screenshot and abstract

<!DOCTYPE html>
<html>
   <head>
       <title>L'indépendante</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="style.css" type="text/css">
   </head>

<h1 class="padding-50">Librairie <em>L'indépendante</em></h1>

       <ul>
           <li class="padding-50"> <a href="index.html"> Accueil </a> </li>
           <li class="padding-50"> <a href="pages/presentation.html"> Présentation </a> </li>
           <li class="padding-50"> <a href="pages/infos-pratiques.html"> Informations pratiques </a> </li>
           <li class="padding-50"> <a href="pages/evenements.html"> Évènements </a> </li>
           <li class="padding-50"> <a href="pages/coups-de-coeur.html"> Nos coups de coeurs </a> </li>
       </ul>

<h2 class="padding-50"> <em>L'indépendante</em> : libre et joyeuse </h2>

           <p class="padding-50">
           La librairie L'indépendante vous accueille tous les jours pour vous offrir le meilleur des livres. Littérature, polars, poésie, philosophie, BD pour tous les âges et toutes les bourses. Venez découvrir notre espace tentaculaires, nos rayonnages multiformes et nos libraires joyeux.
           </p>

<h2 class="padding-50"> Prochain évènement </h2>

<h3 class="padding-50">Lecture post-mortem de <em>L'Odyssée</em> par Homère </h3>

           <p class="padding-50">
           Homère nous fera le plaisir de nous lire l'introduction de son immense poème épique, le dernier vendredi de ce mois.
           </p>
           <a class="padding-50" href="pages/evenements.html" > > > En savoir plus </a>

<h2 class="padding-50"> Lecture du soir </h2>

           <p class="padding-50">
           Cette semaine, votre libraire vous invite à lire un aphorisme de Nietzsche au moment du coucher.
           </p>
           <a class="padding-50" href="pages/coups-de-coeur.html" > > > En savoir plus </a>

       <div id="footer">
       Librairie l'indépendante - 26, allée du Sphinx - 45020 Tournepioche
       </div>

</body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <title>L'indépendante</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="../style.css" type="text/css">
   </head>

<h1 class="padding-50"> Coups de coeur </h1>

       <ul>
           <li class="padding-50"> <a href="../index.html"> Accueil </a> </li>
           <li class="padding-50"> <a href="presentation.html"> Présentation </a> </li>
           <li class="padding-50"> <a href="infos-pratiques.html"> Informations pratiques </a> </li>
           <li class="padding-50"> <a href="evenements.html"> Évènements </a> </li>
           <li class="padding-50"> <a href="coups-de-coeur.html"> Nos coups de coeurs </a> </li>
       </ul>

<h2 class="padding-50"> Lecture du soir : Nietsche </h2>

           <p class="padding-50">
           Cette semaine, votre libraire vous invite à lire un aphorisme de Nietzsche au moment du coucher.
           </p>

<blockquote>
Si le bonheur était véritablement désirable pour l'être humain, l'idiot représenterait incontestablement le plus beau spécimen de la race. </blockquote>

           <blockquote>
           Plus nous nous élevons et plus nous paraissons petits à ceux qui ne savent pas voler.
           </blockquote>

<h2 class="padding-50"> Lecture au quotidien : Montaigne </h2>

           <p class="padding-50">
           Chaque jour Montaigne nous démontre que ce qui tient lieu de boussole n'indique pas toujours le nord.
           </p>

           <blockquote>
           Qui craint de souffrir souffre déjà de ce qu’il craint.
           </blockquote>

           <blockquote>
           Les hommes (dit une sentence grecque ancienne) sont tourmentés par les opinions qu'ils ont des choses, non par les choses mêmes.
           </blockquote>

<h2 class="padding-50"> Lecture de saison : Machiavel </h2>

           <p class="padding-50">
           Lorsque la saison est froide, lisons Machiavel en guise de boisson chaude. Lorsque la saison est chaude, relisons-le tout simplement.
           </p>

           <blockquote>
           Quand il s'agit d’offenser un homme, il faut le faire de telle manière qu'on ne puisse redouter sa vengeance.
           </blockquote>

           <blockquote>
           Un acte de justice et de douceur a souvent plus de pouvoir sur le coeur des hommes que la violence et la barbarie. homère lisant l'Odyssée une mosaïque représentant l'Odyssée
           </blockquote>

       <div id="footer">
       Librairie l'indépendante - 26, allée du Sphinx - 45020 Tournepioche
       </div>

</body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <title>L'indépendante</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="../style.css" type="text/css">
   </head>

<h1 class="padding-50"> Événements </h1>

       <ul>
           <li class="padding-50"> <a href="../index.html"> Accueil </a> </li>
           <li class="padding-50"> <a href="presentation.html"> Présentation </a> </li>
           <li class="padding-50"> <a href="infos-pratiques.html"> Informations pratiques </a> </li>
           <li class="padding-50"> <a href="evenements.html"> Évènements </a> </li>
           <li class="padding-50"> <a href="coups-de-coeur.html"> Nos coups de coeurs </a> </li>
       </ul>

<h2 class="padding-50"> Lecture post-mortem de <em>L'Odyssée</em> par Homère </h2>

           <p class="padding-50">
           Homère nous fera le plaisir de nous lire l'introduction de son immense poème épique, le dernier vendredi de ce mois
           </p>

<h2 class="padding-50"> Rencontre post-moderne avec un écrivain facétieux </h2>

           <p class="padding-50">
           La circonfèrence à beau être nulle part et le centre partout, l'écrivain post-modern Etienne Lechalbe nous rendra une visite surprise à l'heure et au lieu de son choix.
           </p>

       <div id="footer">
       Librairie l'indépendante - 26, allée du Sphinx - 45020 Tournepioche
       </div>

</body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <title>L'indépendante</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="../style.css" type="text/css">
   </head>

<h1 class="padding-50"> Informations pratiques </h1>

       <ul>
           <li class="padding-50"> <a href="../index.html"> Accueil </a> </li>
           <li class="padding-50"> <a href="presentation.html"> Présentation </a> </li>
           <li class="padding-50"> <a href="infos-pratiques.html"> Informations pratiques </a> </li>
           <li class="padding-50"> <a href="evenements.html"> Évènements </a> </li>
           <li class="padding-50"> <a href="coups-de-coeur.html"> Nos coups de coeurs </a> </li>
       </ul>

<h2 class="padding-50"> Horraires </h2>

           <p class="padding-50">
           La librairie est ouverte du lundi au dimanche matin:
           </p>

       <table>
           <tbody>
           <tr>
               <th>lundi</th>
               <th>mardi</th>
               <th>mercredi</th>
               <th>jeudi</th>
               <th>vendredi</th>
               <th>samedi</th>
               <th>dimanche</th>
           </tr>
           <tr>
               <td>13h-18h30</td>
               <td>9h-15h30</td>
               <td>9h-18h30</td>
               <td>9h-21h30</td>
               <td>9h-20h30</td>
               <td>9h-20h00</td>
               <td>9h-13h</td>
           </tr>
           </tbody>
       </table>

<h2 class="padding-50"> Où nous touver? </h2>

           <img class="padding-50" src="../images/plan-acces.jpg" width="600" height="320" alt="Plan d'accès" title="L'independante - plan acces">
           <p class="padding-50 texte-images">
           <b>L'indépendante</b> <br>
           26, allée du Sphinx <br>
           45020 Tournepioche <br>
           Tel: 02 43 58 63 52
           </p>

       <div id="footer">
       Librairie l'indépendante - 26, allée du Sphinx - 45020 Tournepioche
       </div>

</body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <title>L'indépendante</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="../style.css" type="text/css">
   </head>

<h1 class="padding-50"> Présentation </h1>

       <ul>
           <li class="padding-50"> <a href="../index.html"> Accueil </a> </li>
           <li class="padding-50"> <a href="presentation.html"> Présentation </a> </li>
           <li class="padding-50"> <a href="infos-pratiques.html"> Informations pratiques </a> </li>
           <li class="padding-50"> <a href="evenements.html"> Évènements </a> </li>
           <li class="padding-50"> <a href="coups-de-coeur.html"> Nos coups de coeurs </a> </li>
       </ul>

<h2 class="padding-50"> La librairie <em>L'Indépendante </em> </h2>

           <img class="padding-50" src="../images/librairie.jpg" width="250" height="150" alt="Image de présentation de la librairie" title="Présentation de la librairie L'indépendante">
           <p class="padding-50 texte-images">
           Un havre de discorde à Trounepioche.
           </p>

           <p class="padding-50">
           Derrière les cloisons de la boutique séjournent les ouvrages d'une modestie rare. Et les clients de sourire du haut de toutes ses babines s'ils ont loisir de sillonner les rangées de bois, les promontoires gorgées d'histoires, de récits, de pensées, qu'on ne consultera jamais sans s'émouvoir. Tel est l'objet de L'indépendante : un projet sans détour porté par un libraire unique.
           </p>

<h2 class="padding-50"> Noël Frémond : un libraire à nul autre pareil </h2>

           <img class="padding-50" src="../images/noel-fremond.png" width="249" height="312" alt="Portrait de Noël Frémond" title="Portait de Noël Frémond">
           <p class="padding-50 texte-images">
           Noël Frémond a fondé la librairie L'indépendante en 1995.
           </p>

           <p class="padding-50">
           Depuis ce jour, il n'eut de cesse de pratiquer son métier avec l'obstination de celui qui pense que donner le meilleur ne s'organise pas en un jour (ni en deux). Derrière les rayonnages les plus recherchés de Tournepioche, son intrépidité légendaire a traversé les murs de son échoppe au point qu'il se murmure que la Bonnemine du comté ne commanderait rien qui ne soit passé sous ses fourches conseils.
           </p>

       <div id="footer">
       Librairie l'indépendante - 26, allée du Sphinx - 45020 Tournepioche
       </div>

</body>
</html>

CODE CSS

/*reset*/
*{
margin: 0;
padding: 0;
}

/*page*/
body{
   width: 960px;
   margin-left: auto;
   margin-right: auto;
   font-family: arial, verdana, sans-serif;
   font-size: 14px;
}

.padding-50 {
padding-left: 50px;
}

/*titrage*/
h1{
color:#aa3322;
font-size: 20px;
}

h2{
   color: #000000;
   font-size: 24px;
   margin: 50px 0px 5px 0px;
}

h3{
   color: #000000;
   font-size: 18px;
   margin-top: 5px;
}

/*texte*/
p{
margin-top: 5px;
}

/*textes*/
.texte-images {
margin: 5px 0px 15px 0px;
}

/*menu*/
ul{
   background-color: #aa3322;
   list-style-type: none;
   margin:0;
   padding: 10px 0px;
}

li{
   border-bottom: 1px #cccccc dashed;
   color: #cccccc;
   margin: 3px 0px;
   padding: 3px 0px
}

li a {
color: #cccccc;
}

li a:hover{
color: #ffffff;
}

/*liens*/
a {
   color:#aa3322;
}
a:hover {
   color:#aaaaaa;
}

/*footer*/
#footer{
   text-align: center;
   background-color:#aaaaaa;
   color: #721717;
   font-size: 14px;
   margin-top: 70px;
   padding: 20px 0;
}

/*tableau*/
table{
   border:2px #aa3322 solid;
   width: 75%;
   border-collapse: collapse;
   margin: 10px 0px 10px 50px;
   table-layout: fixed;
}

th{
   font-size: 14px;
   text-align: center;
   border:2px #aa3322 solid;
   padding: 5px 0px;
}

td{
   font-size: 12px;
   text-align: center;
   border:2px #aa3322 solid;
   padding: 5px 0px;
}

/*images page évènements*/
.img-first{
margin:15px 0px 10px 50px;
border: 1px #ededed solid;
}

.img-ev{
margin: 15px 0px 10px 20px;
border: 1px #ededed solid;
}

/*citations*/
blockquote{
   margin: 15px 0px 5px 90px;
   padding: 15px;
   background-color: #ededed;
   width:450px;
   border: 1.5px #aa3322 dashed;
   font-size: 16px;
   font-style: italic
}

Ecriture code HTMLS-CSS d'après maquettes

Owner

Ecriture code HTMLS-CSS d'après maquettes

Creative Fields